<template>
  <el-container style="height: 90vh">
    <el-header style="margin-bottom: 5px">
      <el-row style="padding-top: 5px; padding-bottom: 5px">
        <el-card style="width: 100%; text-align: left">
          <span style="margin-left: 10px">日期：</span>
          <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="起始日期"
              end-placeholder="结束日期"
              placeholder="日期"
              :size="'default'"
              style="width: 18vw;"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              :disabled-date="disableFutureDates"
          />
          <el-button @click="selectHotpoint" style="width: 5vw; margin-left: 10px" type="primary">查询</el-button>
        </el-card>
      </el-row>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="12">
          <div class="chart-container">
            <div class="chart-wrapper" id="chart1"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-container">
            <div class="chart-wrapper" id="chart2"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="12">
          <el-card class="dashboard-card">
            <div class="card-header">
              <div class="card-title">各天热搜情感分布</div>
            </div>
            <div class="chart-container">
              <div class="chart-wrapper" id="multiBarChart"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="dashboard-card">
            <div class="card-header">
              <div class="card-title">热度-热搜数</div>
            </div>
            <div class="chart-container">
              <div class="chart-wrapper" id="lineChart"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import {computed, nextTick, onMounted, ref} from "vue";
import axios from "axios";
import {dayjs, ElMessage} from "element-plus";
import moment from "moment/moment";
import type {ECharts} from "echarts";

onMounted(() => {
  initChart1()
  initChart2()
  updateLineChart()
  updateMultiBarChart()
})

const selectHotpoint = async () => {
  if (dateRange.value === [] || dateRange.value === undefined || dateRange.value === null) {
    ElMessage.warning('请选择日期！')
    return
  }
  const dateList = getDateRangeArray(dateRange.value[0], dateRange.value[1]);
  // console.log(dateList);

  // 查询热度-热搜数数据
  axios.get(`${window.BASE_URL}/api/hotSearch/getHotDataAndClassifyByDate/${dateRange.value[0]}/${dateRange.value[1]}`).then(res => {
    // console.log(res);
    xAxis.value = res.data.data.dates;
    yAxis1.value = res.data.data.counts;
    yAxis2.value = res.data.data.fevers;
    updateLineChart()
  })

  // 查询各天热搜情感分布数据
  axios.get(`${window.BASE_URL}/api/hotSearch/getHotDataAndClassifyByDateAndCategory/${dateRange.value[0]}/${dateRange.value[1]}`).then(res => {
    // console.log(res);
    xAxisData.value = res.data.data.dates;
    yAxisData1.value = res.data.data.娱乐圈;
    yAxisData2.value = res.data.data.科技;
    yAxisData3.value = res.data.data.体育;
    yAxisData4.value = res.data.data.财经;
    yAxisData5.value = res.data.data.军事;
    yAxisData6.value = res.data.data.游戏;
    yAxisData7.value = res.data.data.艺术;
    yAxisData8.value = res.data.data.动漫;
    yAxisData9.value = res.data.data.传统文化;
    yAxisData10.value = res.data.data.社会;
    yAxisData11.value = res.data.data.健康;
    yAxisData12.value = res.data.data.教育;
    yAxisData13.value = res.data.data.政治;
    yAxisData14.value = res.data.data.其它;
    updateMultiBarChart()

    const data1 = res.data.data.娱乐圈.reduce((total: number, num: number) => total + num, 0);
    const data2 = res.data.data.科技.reduce((total: number, num: number) => total + num, 0);
    const data3 = res.data.data.体育.reduce((total: number, num: number) => total + num, 0);
    const data4 = res.data.data.财经.reduce((total: number, num: number) => total + num, 0);
    const data5 = res.data.data.军事.reduce((total: number, num: number) => total + num, 0);
    const data6 = res.data.data.游戏.reduce((total: number, num: number) => total + num, 0);
    const data7 = res.data.data.艺术.reduce((total: number, num: number) => total + num, 0);
    const data8 = res.data.data.动漫.reduce((total: number, num: number) => total + num, 0);
    const data9 = res.data.data.传统文化.reduce((total: number, num: number) => total + num, 0);
    const data10 = res.data.data.社会.reduce((total: number, num: number) => total + num, 0);
    const data11 = res.data.data.健康.reduce((total: number, num: number) => total + num, 0);
    const data12 = res.data.data.教育.reduce((total: number, num: number) => total + num, 0);
    const data13 = res.data.data.政治.reduce((total: number, num: number) => total + num, 0);
    const data14 = res.data.data.其它.reduce((total: number, num: number) => total + num, 0);
    chartData2.value = [
      { name: '娱乐圈', value: data1 },
      { name: '科技', value: data2 },
      { name: '体育', value: data3 },
      { name: '财经', value: data4 },
      { name: '军事', value: data5 },
      { name: '游戏', value: data6 },
      { name: '艺术', value: data7 },
      { name: '动漫', value: data8 },
      { name: '传统文化', value: data9 },
      { name: '社会', value: data10 },
      { name: '健康', value: data11 },
      { name: '教育', value: data12 },
      { name: '政治', value: data13 },
      { name: '其它', value: data14 }
    ];
    updateChart2();
  })

  // 查询整体热搜情感分布数据
  try {
    const requests = dateList.map(date =>
        axios.get(`${window.BASE_URL}/api/hotSearch/getHotDataAndAnalysisByDate/${date}`)
    );

    const responses = await Promise.all(requests);

    let positive = 0;
    let negative = 0;
    let neutral = 0;

    const successCount = ref(0);
    const totalCount = ref(0);

    responses.forEach(res => {
      totalCount.value++;
      if (res.data.flag) {
        // console.log(res.data.data);
        successCount.value++;
        positive += res.data.data.Positive;
        negative += res.data.data.Negative;
        neutral += res.data.data.Neutral;
      } else {
        // ElMessage.error(`查询失败：${res.data.msg}`);
        console.log(`查询失败：${res.data.msg}`)
      }
    });

    ElMessage.info(`成功获取${successCount.value}条数据，共${totalCount.value}条数据`);
    console.log(`成功获取${successCount.value}条数据，共${totalCount.value}条数据`)

    // 更新chartData1
    chartData1.value = [
      {
        value: positive,
        name: '积极',
        itemStyle: { color: '#67C23A' }
      },
      {
        value: neutral,
        name: '中立',
        itemStyle: { color: '#909399' }
      },
      {
        value: negative,
        name: '消极',
        itemStyle: { color: '#F56C6C' }
      }
    ];

    // 手动触发图表更新
    updateChart1();
  } catch (error) {
    ElMessage.error('查询情感分布数据失败');
    console.error('查询情感分布数据失败:', error);
  }
}

// 日期选择框
const dateRange = ref<string[]>([]);

// 禁用日期选择框
const disableFutureDates = (time: Date) => {
  return time.getTime() > Date.now();
};
// 获取日期范围数组
const getDateRangeArray = (startDate: string, endDate: string): string[] => {
  const dates: string[] = [];
  let currentDate = dayjs(startDate);
  const endDateObj = dayjs(endDate);

  // 循环添加日期，直到包含结束日期
  while (currentDate.isBefore(endDateObj) || currentDate.isSame(endDateObj, "day")) {
    dates.push(currentDate.format("YYYY-MM-DD"));
    currentDate = currentDate.add(1, "day");
  }

  // console.log('Generated date range:', dates); // 添加日志检查
  return dates;
};

// 统一的提示内容生成函数
const generateTooltipContent = (params: any) => {
  return `
    <div style="margin: 0; text-align: left; font-family: Arial, sans-serif;">
      <div style="font-size: 14px; color: #666; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 5px;">
        ${params.seriesName || '数据项'}
      </div>
      <div style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 8px;">
        <span style="display: inline-block; width: 10px; height: 10px; background: ${params.color};
              border-radius: 50%; margin-right: 8px; flex-shrink: 0;"></span>
        <span style="font-weight: bold; white-space: nowrap;">${params.name}</span>
      </div>
      <div style="line-height: 1.6">
        <div style="display: flex; justify-content: space-between">
          <span style="color: #999; margin-right: 15px">数量：</span>
          <span style="color: #409EFF">${params.value?.toLocaleString() || '0'}</span>
        </div>
        <div style="display: flex; justify-content: space-between">
          <span style="color: #999; margin-right: 15px">占比：</span>
          <span style="color: #67C23A">${params.percent?.toFixed(2) || '0.00'}%</span>
        </div>
      </div>
    </div>
  `;
};

// --> 环形图 <--
const chart1 = ref<echarts.ECharts | null>(null);
const chart2 = ref<echarts.ECharts | null>(null);

// 初始化图表
const initChart1 = () => {
  const chartDom = document.getElementById('chart1');
  if (chartDom) {
    chart1.value = echarts.init(chartDom);
    updateChart1(); // 初始化时渲染
  }
}

const initChart2 = () => {
  const chartDom = document.getElementById('chart2');
  if (chartDom) {
    chart2.value = echarts.init(chartDom);
    updateChart2(); // 初始化时渲染
  }
}

// 更新图表数据
const updateChart1 = () => {
  if (!chart1.value) return;

  const newOption = {
    ...option1, // 保留原有配置
    series: [{
      ...option1.series[0],
      data: chartData1.value // 更新数据
    }]
  };

  chart1.value.setOption(newOption);
};

const updateChart2 = () => {
  if (!chart2.value) return;

  const newOption = {
    ...option2, // 保留原有配置
    series: [{
      ...option2.series[0],
      data: chartData2.value // 更新数据
    }]
  };

  chart2.value.setOption(newOption);
};

// 环形图配置
const chartData1 = ref([
  {
    value: 1,
    name: '积极',
    itemStyle: {
      color: '#67C23A' // Element Plus 的成功色（绿色）
    }
  },
  {
    value: 3,
    name: '中立',
    itemStyle: {
      color: '#909399' // Element Plus 的次要色（灰色）
    }
  },
  {
    value: 2,
    name: '消极',
    itemStyle: {
      color: '#F56C6C' // Element Plus 的危险色（红色）
      // 或者使用警告色黄色：#E6A23C
    }
  },
]);

const chartData2 = ref([
  { value: 1, name: '娱乐圈' },
  { value: 3, name: '科技' },
  { value: 2, name: '体育' },
  { value: 4, name: '财经' },
  { value: 5, name: '军事' },
  { value: 3, name: '游戏' },
  { value: 7, name: '艺术' },
  { value: 6, name: '动漫' },
  { value: 2, name: '传统文化' },
  { value: 9, name: '社会' },
  { value: 4, name: '健康' },
  { value: 1, name: '教育' },
  { value: 7, name: '政治' },
  { value: 3, name: '其他' },
]);

// 左侧饼状图设置
const option1 = {
  title: {
    text: '整体热搜情感分布',    // 标题文本
    left: 'center',        // 水平居中
    top: '3%',             // 距离顶部距离
    textStyle: {
      color: '#333',       // 字体颜色
      fontSize: 18,        // 字体大小
      fontWeight: 'bold'   // 加粗
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: (params: any) => {
      return `
        <div style="
          margin: 0;
          text-align: left;  // 全局左对齐
          font-family: Arial, sans-serif; // 统一字体
        ">
          <!-- 标题 -->
          <div style="
            font-size: 14px;
            color: #666;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            margin-bottom: 5px;
          ">
            ${params.seriesName}
          </div>

          <!-- 分类名称 -->
          <div style="
            display: flex;
            align-items: center;
            justify-content: flex-start; // 左对齐flex项
            margin-bottom: 8px;
          ">
            <span style="
              display: inline-block;
              width: 10px;
              height: 10px;
              background: ${params.color};
              border-radius: 50%;
              margin-right: 8px;
              flex-shrink: 0; // 防止图标挤压
            "></span>
            <span style="
              font-weight: bold;
              white-space: nowrap; // 防止换行
            ">
              ${params.name}
            </span>
          </div>

          <!-- 数据行 -->
          <div style="line-height: 1.6">
            <div style="display: flex; justify-content: space-between">
              <span style="color: #999; margin-right: 15px">数量：</span>
              <span style="color: #409EFF">${params.value.toLocaleString()}</span>
            </div>
            <div style="display: flex; justify-content: space-between">
              <span style="color: #999; margin-right: 15px">占比：</span>
              <span style="color: #67C23A">${params.percent.toFixed(2)}%</span>
            </div>
          </div>
        </div>
      `;
    }
  },
  legend: {
    top: '15%',
    left: 'center',
    orient: 'horizontal', // 水平排列
    itemGap: 15          // 图例项间距
  },
  grid: {                // 内容区域留白
    top: '20%',
    bottom: '15%'
  },
  series: [
    {
      name: '情感分布',
      type: 'pie',
      colorBy: 'data',
      center: ['50%', '60%'],
      radius: [20, 100],
      avoidLabelOverlap: false,
      roseType: 'radius', // 启用南丁格尔玫瑰图
      itemStyle: {
        borderRadius: 5 // 可选圆角
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: chartData1.value
    }
  ]
};

// 右侧饼状图设置
const option2 = {
  title: {
    text: '整体热搜种类分布',    // 标题文本
    left: 'center',        // 水平居中
    top: '3%',             // 距离顶部距离
    textStyle: {
      color: '#333',       // 字体颜色
      fontSize: 18,        // 字体大小
      fontWeight: 'bold'   // 加粗
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: (params: any) => {
      return generateTooltipContent(params); // 使用统一的提示内容生成函数
    }
  },
  legend: {
    right: '5%',
    top: 'center',
    orient: 'vertical',
    itemGap: 15,          // 图例项间距
    formatter: function (name: string) {
      // 自定义截断函数
      const truncate = (str: string, maxLength: number) => {
        return str.length > maxLength ? str.substring(0, maxLength) + '…' : str;
      };

      // 根据容器宽度动态计算最大长度（示例按14px字体估算）
      const maxCharWidth = 10; // 大约10个汉字宽度
      return truncate(name, maxCharWidth);
    },
    tooltip: {
      show: true,
      formatter: ({ name }: { name: string }) => {
        // 在chartData2中查找对应的数据项
        const dataItem = chartData2.value.find(item => item.name === name);
        if (!dataItem) return name;

        // 构造模拟参数对象
        const mockParams = {
          ...dataItem,
          seriesName: '种类分布',
          percent: 0 // 临时占位，后面会计算真实值
        };

        // 计算真实百分比
        const total = chartData2.value.reduce((sum, item) => sum + item.value, 0);
        mockParams.percent = total > 0 ? (mockParams.value / total * 100) : 0;

        return generateTooltipContent(mockParams);
      }
    }
  },
  grid: {                // 内容区域留白
    left: '0%',
    right: '20%',
    top: '20%',
    bottom: '15%',
    containLabel: true
  },
  series: [
    {
      name: '种类分布',
      type: 'pie',
      center: ['48%', '54%'],
      radius: ['10%', '73%'],
      roseType: 'radius', // 启用南丁格尔玫瑰图
      itemStyle: {
        borderRadius: 5 // 可选圆角
      },
      avoidLabelOverlap: true,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        focus: 'self',  // 只高亮当前扇区
        scale: true,    // 放大效果
        scaleSize: 5,   // 放大尺寸
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        label: {
          show: false,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      blurScope: 'coordinateSystem',  // 淡化其他扇区
      labelLine: {
        show: false
      },
      data: chartData2.value
    }
  ]
};

// --> 折线图 <--
let lineChart: ECharts | null = null;

const xAxis = ref([1, 2, 3, 4, 5, 6, 7])
const yAxis1 = ref([1, 2, 3, 4, 5, 6, 7]) // 热度值
const yAxis2 = ref([7, 6, 5, 4, 3, 2, 1]) // 热搜数

const updateLineChart = () => {
  if (lineChart) {
    lineChart.dispose();
    lineChart = null;
  }

  // 创建新实例
  const chartDom = document.getElementById('lineChart');
  if (!chartDom) return;

  lineChart = echarts.init(chartDom);
  lineChart.setOption(lineChartOption.value);
}

const lineChartOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#fff',
    borderColor: '#eee',
    textStyle: {
      color: '#333',
      fontSize: 14
    }
  },
  grid: {
    left: '3%',
    right: '3%',
    bottom: '15%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    position: 'bottom', // 明确指定位置
    axisLabel: {
      // 截断文本并添加省略号
      formatter: (value: string) => {
        const maxLength = 6 // 最大显示字符数（根据实际宽度调整）
        return value.length > maxLength
            ? `${value.substring(0, maxLength)}...`
            : value
      },
      rotate: 45,          // 倾斜45度防止重叠
      interval: 0,          // 强制显示所有标签
      textStyle: {
        color: '#666',
        fontSize: 12
      }
    },
    data: xAxis.value
  },
  yAxis: [
    {
      name: '热度总值',
      type: 'value',
      position: 'left',
      axisLine: {
        lineStyle: {
          color: '#409EFF'
        }
      },
      min: 0
    },
    {
      name: '热搜总数',
      type: 'value',
      position: 'right',
      axisLine: {
        lineStyle: {
          color: '#67C23A'
        }
      },
      min: 0
    }
  ],
  series: [
    {
      data: yAxis1.value,
      name: '热搜总值',
      center: ['50%', '60%'],
      type: 'line',
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#409EFF'
      },
      lineStyle: {
        width: 2
      },
      emphasis: {
        focus: 'series'
      },
      yAxisIndex: 0
    },
    {
      data: yAxis2.value,
      name: '热搜总数',
      center: ['50%', '60%'],
      type: 'line',
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#67C23A'
      },
      lineStyle: {
        width: 2
      },
      emphasis: {
        focus: 'series'
      },
      yAxisIndex: 1
    }
  ],

}));

// --> 堆叠柱状图 <--
let multiBarChart: ECharts | null = null;

const xAxisData = ref(['暂', '时', '不', '存', '在', '数', '据'])
const yAxisData1 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData2 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData3 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData4 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData5 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData6 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData7 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData8 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData9 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData10 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData11 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData12 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData13 = ref([1, 1, 1, 1, 1, 1, 1])
const yAxisData14 = ref([1, 1, 1, 1, 1, 1, 1])


// 初始化柱状图
const updateMultiBarChart = () => {
  // 销毁旧实例
  if (multiBarChart) {
    multiBarChart.dispose();
    multiBarChart = null;
  }

  // 创建新实例
  const chartDom = document.getElementById('multiBarChart');
  if (!chartDom) return;

  multiBarChart = echarts.init(chartDom);
  multiBarChart.setOption(multiBarChartOption.value);
}

const hotpointSeries = ref([  '娱乐圈', '科技', '体育', '财经', '军事', '游戏', '艺术', '动漫', '传统文化', '社会', '健康', '教育', '政治', '其它'])

/*const multiBarChartOption = computed(() => ({
  // tooltip 配置
  tooltip: {
    trigger: 'axis',  // 触发方式：轴
    axisPointer: {   // 添加阴影指示器
      type: 'shadow' // 官方示例的阴影样式
    },
    backgroundColor: '#333',
    borderColor: '#666',
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    // 自定义提示内容
    formatter: function (params: any) {
      // 计算当前分类所有系列值的总和
      const total = params.reduce((sum: number, item: any) => sum + item.value, 0);
      let tipHtml = `<div style="text-align: left; margin: 5px">`;
      params.forEach((item: any) => {
        // 计算当前值在总和中占比（保留两位小数）
        const percent = total === 0 ? '0.00%' : `${((item.value / total) * 100).toFixed(2)}%`;
        tipHtml += `
          <div style="display: flex; align-items: center;">
            <span style="
              display: inline-block;
              width: 10px;
              height: 10px;
              background: ${item.color};
              margin-right: 8px;
              border-radius: 2px;">
            </span>
            <span style="flex: 1">
              ${item.seriesName}：
              <span style="color: #ffd700; margin-left: 8px">${item.value}</span>
              <span style="color: #67C23A; margin-left: 8px;">(${percent})</span>
            </span>
          </div>
        `
      })
      tipHtml += `</div>`
      return tipHtml
    }
  },
  legend: {
    data: hotpointSeries.value, // 系列名称数组（需与series中的name对应）
    top: '5%',         // 位置：顶部
    textStyle: {
      color: '#606266' // 使用Element Plus的文本颜色
    }
  },
  grid: {
    top: '25%',    // 顶部留空比例
    bottom: '15%', // 底部留空比例
    containLabel: true // 包含坐标轴标签
  },
  xAxis: {
    type: 'category',
    data: xAxisData.value,
    axisLabel: {
      // 截断文本并添加省略号
      formatter: (value: string) => {
        const maxLength = 6 // 最大显示字符数（根据实际宽度调整）
        return value.length > maxLength
            ? `${value.substring(0, maxLength)}...`
            : value
      },
      rotate: 45,          // 倾斜45度防止重叠
      interval: 0,          // 强制显示所有标签
      textStyle: {
        color: '#666',
        fontSize: 12
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: hotpointSeries.value[0],       // 新增系列名称（对应legend）
      type: 'bar',
      stack: 'judge',    // 保持原有堆叠组
      emphasis: {        // 新增聚焦效果
        focus: 'series'  // 系列级高亮（官方交互效果）
      },
      data: yAxisData1.value,  // 保持原有数据传递方式
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[1],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData2.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[2],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData3.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[3],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData4.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[4],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData5.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[5],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData6.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[6],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData7.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[7],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData8.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[8],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData9.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[9],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData10.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[10],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData11.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[11],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData12.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[12],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData13.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
    {
      name: hotpointSeries.value[13],
      type: 'bar',
      stack: 'judge',
      emphasis: {
        focus: 'series'
      },
      data: yAxisData14.value,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
    },
  ]
}));*/
const multiBarChartOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    backgroundColor: '#fff',
    borderColor: '#eee',
    padding: [10, 15],
    textStyle: {
      color: '#333',
      fontSize: 12,
      lineHeight: 18
    },
    formatter: function (params: any) {
      // 获取当前轴点的日期/时间
      const axisValue = params[0].axisValue;

      // 计算总数
      const total = params.reduce((sum: number, item: any) => sum + item.value, 0);

      let tooltipHtml = `
        <div style="text-align: left; font-family: Arial, sans-serif;">
          <div style="font-size: 14px; font-weight: bold; color: #333; margin-bottom: 8px;">
            ${axisValue}
          </div>
          <div style="display: flex; flex-wrap: wrap; max-height: 200px; overflow-y: auto;">
            <div style="flex: 1; min-width: 50%;">
      `;

      // 将数据分成两列
      const halfLength = Math.ceil(params.length / 2);
      const firstColumn = params.slice(0, halfLength);
      const secondColumn = params.slice(halfLength);

      // 第一列数据
      firstColumn.forEach((param: any, index: number) => {
        const color = param.color;
        const seriesName = param.seriesName;
        const value = param.value;
        const percent = total > 0 ? ((value / total) * 100).toFixed(2) : '0.00';

        tooltipHtml += `
          <div style="margin-bottom: 6px; display: flex; align-items: center;">
            <span style="display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: ${color}; margin-right: 6px;"></span>
            <span style="flex: 1; font-weight: 500; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${seriesName}">
              ${seriesName}
            </span>
            <span style="font-weight: bold; color: ${color}; font-size: 11px; margin-left: 4px;">${value}</span>
            <span style="color: #999; font-size: 10px; margin-left: 4px;">(${percent}%)</span>
          </div>
        `;
      });

      tooltipHtml += `
            </div>
            <div style="flex: 1; min-width: 50%;">
      `;

      // 第二列数据
      secondColumn.forEach((param: any, index: number) => {
        const color = param.color;
        const seriesName = param.seriesName;
        const value = param.value;
        const percent = total > 0 ? ((value / total) * 100).toFixed(2) : '0.00';

        tooltipHtml += `
          <div style="margin-bottom: 6px; display: flex; align-items: center;">
            <span style="display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: ${color}; margin-right: 6px;"></span>
            <span style="flex: 1; font-weight: 500; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${seriesName}">
              ${seriesName}
            </span>
            <span style="font-weight: bold; color: ${color}; font-size: 11px; margin-left: 4px;">${value}</span>
            <span style="color: #999; font-size: 10px; margin-left: 4px;">(${percent}%)</span>
          </div>
        `;
      });

      tooltipHtml += `
            </div>
          </div>
          <div style="margin-top: 8px; font-size: 12px; color: #666; border-top: 1px solid #eee; padding-top: 8px; clear: both;">
            总计: <span style="font-weight: bold;">${total}</span>
          </div>
        </div>
      `;

      return tooltipHtml;
    }
  },
  // 其余配置保持不变...
  legend: {
    data: hotpointSeries.value,
    type: 'scroll',
    top: '5%',
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      fontSize: 10,
      color: '#606266'
    },
    pageIconSize: 10,
    pageTextStyle: {
      fontSize: 10
    }
  },
  grid: {
    top: '20%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: xAxisData.value,
    axisLabel: {
      formatter: (value: string) => {
        const maxLength = 6;
        return value.length > maxLength
            ? `${value.substring(0, maxLength)}...`
            : value;
      },
      rotate: 45,
      interval: 0,
      textStyle: {
        color: '#666',
        fontSize: 10
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      fontSize: 10
    }
  },
  series: hotpointSeries.value.map((name, index) => ({
    name: name,
    type: 'bar',
    stack: 'judge',
    emphasis: {
      focus: 'series',
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
    data: [
      yAxisData1.value,
      yAxisData2.value,
      yAxisData3.value,
      yAxisData4.value,
      yAxisData5.value,
      yAxisData6.value,
      yAxisData7.value,
      yAxisData8.value,
      yAxisData9.value,
      yAxisData10.value,
      yAxisData11.value,
      yAxisData12.value,
      yAxisData13.value,
      yAxisData14.value
    ][index],
    showBackground: true,
    backgroundStyle: {
      color: 'rgba(180, 180, 180, 0.1)'
    },
    itemStyle: {
      color: [
        '#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE',
        '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC', '#1E90FF',
        '#FF6347', '#7B68EE', '#20B2AA', '#FFD700'
      ][index % 14]
    }
  }))
}));
</script>

<style scoped lang="scss">
.dashboard-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

  :deep(.el-card__body) {
    padding: 0;
  }
}

.chart-container {
  width: 40vw;             // 保持原有宽度设置
  height: 35vh;            // 保持原有高度设置
  margin: 0 auto;          // 水平居中
  position: relative;      // 为子元素绝对定位提供基准
}

.chart-wrapper {
  width: 100%;
  height: 100%;
  display: flex;           // 启用弹性布局
  justify-content: center; // 水平居中
  align-items: center;     // 垂直居中
}

// card标题样式
.card-header {
  padding: 18px 24px;  // 设置内边距
  border-bottom: 1px solid #ebeef5; // 添加底部边框

  // 定义子元素样式
  .card-title {
    font-size: 16px;  // 字体大小
    font-weight: 600; // 字体粗细
    color: #303133; // 字体颜色
  }
}
</style>